<template>
	<view>
		<view class="edgeInsetTop"></view>
		<form @submit="formSubmit">
			<view class="cu-list menu solid-bottom">
				<view class="cu-item" style="min-height:150rpx;">
					<view class="content">
						<text style="font-size: 30rpx;">店铺头像</text>
					</view>
					<view class="action">
						<view v-if="avatar" class="grid">
							<view class="upload-item flex-1 radius">
								<image :src="avatar" mode="aspectFill" style="height: 120rpx; width: 120rpx;" @tap="handlePreview()"></image>
							</view>
							<view class="tag" @tap="handleDelImage()">
								<text class="wlIcon-31guanbi text-white"></text>
							</view>
						</view>		
						
						<view v-else class="text-gray flex flex-direction bg-gray justify-center align-center radius-bock" @tap="handleImage()" style="width: 120rpx;height:120rpx;">
							<text class="wlIcon-tianjia"></text>
							<view class="margin-top-xs text-xs">添加图片</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cu-form-group">
				<view class="title">店铺名称</view>
				<input placeholder="请输入店铺名称" name="shopname" v-model="shopname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">店铺简介</view>
				<input placeholder="请输入店铺简介" name="bio" v-model="bio"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">店铺类型</view>
				<picker @change="typeChange" :value="index" range-key="name" :range="typeArr">
					<view class="uni-input" style="color: grey;">
						{{typeArr[index].name}}
					</view>
				</picker>
				<text class="wlIcon-fanhui2"></text>
			</view>
			
			
			<view class="cu-form-group">
				<view class="title">营业起始时间</view>
				<picker mode="time" :value="starttime" start="" end="" @change="startTimeChange">
					<view class="uni-input">{{starttime}}</view>
				</picker>
				<text class="wlIcon-fanhui2"></text>
			</view>
			<view class="cu-form-group">
				<view class="title">营业结束时间</view>
				<picker mode="time" :value="endtime" start="" end="" @change="endTimeChange">
					<view class="uni-input">{{endtime}}</view>
				</picker>
				<text class="wlIcon-fanhui2"></text>
			</view>
			
			
			<view class="safeAreaBottom"></view>
			<view class="wanlfind-add-container__foot">
				<view class="cu-bar tabbar foot flex flex-direction bg-white align-center">
					<view class="padding-lr-bj" style="width: 100%;">
						<button form-type="submit" class="wanl-bg-redorange">保存</button>
					</view>					
				</view>
			</view>
		</form>

			
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				avatar:'',
				shopname:'',
				type:'',
				bio:''	,
				
				
				
				typeArr: [],
				
				
				
				index: 0,
				biz_time:'',//营业时间
				starttime: '00:00',
				endtime:'00:00'
			}
		},
		onLoad() {
			this.getChooseTypeList();
			
			setTimeout(()=>{
				uni.request({
					url: '/wanlshop/shop/detail', 
					method: 'GET',
					success: res => {
						this.avatar = res.data.avatar
						this.shopname = res.data.shopname
						this.bio = res.data.bio	
						this.type = res.data.type
						//this.index = this.type > 0 ? this.type - 1 : 0
						
						this.index = this.typeArr.findIndex(item=>{
							console.log(item.id + "-------" + res.data.type);
							return item.id == res.data.type
						})
						
						console.log(this.index)
						console.log(444)
						
						this.biz_time = res.data.biz_time
						let arr = this.biz_time.split('-');
						this.starttime = arr[0]
						this.endtime = arr[1]
					}
				});
				
			},1000)
			//获取门店详情
			uni.request({
				url: '/wanlshop/shop/detail', 
				method: 'GET',
				success: res => {
					this.avatar = res.data.avatar
					this.shopname = res.data.shopname
					this.bio = res.data.bio	
					this.type = res.data.type
					//this.index = this.type > 0 ? this.type - 1 : 0
					this.biz_time = res.data.biz_time
					let arr = this.biz_time.split('-');
					this.starttime = arr[0]
					this.endtime = arr[1]
				}
			});
			
		},
		methods: {
			
			getChooseTypeList(){
				uni.request({
					url: '/wanlshop/bussinfo/getBussinfoList',
					success:(res)=>{
						if(res.res.code == 1){
							this.typeArr = res.res.data.map(item=>{
								return {name:item.name,id:item.id}
							})
							console.log(this.typeArr)
						}
					}
				})
			},
			
			//类型
			typeChange: function(e) {
				
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.type = this.typeArr[e.detail.value]["id"];
				this.index =  e.detail.value;
				console.log(this.type);
			},
			//营业时间
			 startTimeChange: function(e) {
				this.starttime = e.detail.value
			},
			endTimeChange: function(e) {
				this.endtime = e.detail.value
			},
			formSubmit: function(e) {
				//定义表单规则
				
				let rule = [
					{name: 'shopname', checkType: 'string', checkRule: '3,32', errorMsg: '店铺名称，至少3-32字符'},
					{name: 'bio', checkType: 'string', checkRule: '3,100', errorMsg: '店铺简介，至少3-100字符'},
				];
				//进行表单检查
				let formData = e.detail.value;				
				if(this.avatar === ''){
					this.$wanlshop.msg('请上传店铺图片~');
					return
				}
				formData.avatar = this.avatar
				formData.type = this.type
				formData.biz_time = this.starttime + '-' + this.endtime
				// console.log(formData) 
				// return
				let checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.request({
						url: '/wanlshop/shop/update ', 
						method: 'POST',
						data: formData,
						success: res => {
							this.$wanlshop.msg('修改成功');
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},	
											
											
			handleImage() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						//console.log(res)
						if (res.tempFilePaths) {
							res.tempFilePaths.map((item, index) => {
								// 延迟触发一下
								uni.request({
									url: '/wanlshop/common/uploadData',
									success: updata => {
										uni.getImageInfo({
											src: res.tempFilePaths[0],
											success: image => {
												uni.uploadFile({
													url: updata.data.uploadurl,
													filePath: image.path,
													name: 'file',
													formData:updata.data.storage == 'local' ? null : updata.data.multipart,
													success: data => {
														let src = 'https://adminshop.12sxb.cn/' + JSON.parse(data.data).data.url
														this.avatar = src
													},
													fail: error =>{
														uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
													}
												});
											}
										});
										
										
									}
								});
							})
						}
					}
				});
			},
			
			//图片预览
			handlePreview() {
				console.log(this.avatar)
				uni.previewImage({
					urls:this.avatar,
					current:this.avatar,
				})
			},
			
			//删除图片
			handleDelImage() {
				this.avatar = ''
			},
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.image-center {
		display: flex;
		justify-content: center
	}
	.upload{
		padding: 20rpx;
	}
	.upload-box{
		height: 240rpx;
		max-height: 300rpx;
	}
	.upload-item{
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-items: center;
		justify-content: center;
		height: 100%;
		border: 1rpx solid #dddddd;
	}
	
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.cu-form-group uni-picker::after{
		display: none;
	}
	.grid {
		position: relative;
		.tag {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			width: 40rpx;
			height: 40rpx;
			border-radius: 5500rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			overflow: hidden;
			background-color: #e6162c;
		}
	}
</style>
